<template>
  <div class="article-list-page">
    <el-card v-if="!$store.state.article.navShowPublish">
        <!-- 卡片头部 -->
         <template #header>
            文章列表
         </template>
         <!-- 卡片搜素区域 -->
         <div class="card-select">
            <div>
                <template>
                    <span class="selectName">文章分类</span>
                    <el-select v-model="form.value1" placeholder="请选择分类">
                        <el-option
                        v-for="item in articleClassData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>

                    <span class="selectName secondSelect">请选择状态</span>
                    <el-select
                        v-model="form.value2"
                        collapse-tags
                        placeholder="请选择">
                        <el-option
                        v-for="item in publishStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button class="btn" @click="searchInfo">筛选</el-button>
                    <el-button class="resetBtn" @click="resetElCardSelect">重置</el-button>
                </template>
            </div>
            <div class="publish-article">
                <el-button class="btn" @click="publishArticle(-1)">发表文章</el-button>
            </div>
         </div>
         <!-- 卡片表格区域 -->
        <template>
            <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.5)"
            :data="tableData"
            border
            style="width: 100%">
                <el-table-column
                    prop="title"
                    label="文章标题"
                    width="600">
                </el-table-column>
                <el-table-column
                    prop="cate_name"
                    label="分类"
                    width="140">
                </el-table-column>
                <el-table-column
                    prop="pub_date"
                    label="发表时间"
                    width="240">
                </el-table-column>
                <el-table-column
                    prop="state"
                    label="状态"
                    width="240">
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template #default="obj">
                        <el-button type="primary" style="background-color: #4F81FF;" @click="publishArticle(obj.row.id)">修改</el-button>
                        <el-button type="danger" @click="del(obj.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!-- 卡片页码区域 -->
        <el-pagination
        style="margin-top: 30px;"

        @current-change="handleCurrentChange"
        :current-page="form.pagenum"
        :page-sizes="[5, 10, 20]"
        @size-change="handlePageSizeChange"
        :page-size="form.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
        </el-pagination>
    </el-card>

    <router-view v-else></router-view>
  </div>
</template>

<script>
import { getArticleList, userDelArticle } from '@/api/articleList'
export default {
  name: 'ArticleList',
  data () {
    return {
      selectType: false,
      pageTotal: 0,
      loading: false,
      form: {
        pagenum: 1,
        pagesize: 5,
        value1: '',
        value2: ''
      },
      tableData: [],
      articleClassData: [
        { value: '所有分类', label: '所有分类' }
      ],
      publishStatus: [{
        value: '所有状态',
        label: '所有状态'
      }, {
        value: '已发布',
        label: '已发布'
      }, {
        value: '草稿',
        label: '草稿'
      }]
    }
  },
  async created () {
    // 获取仓库的文章分类数据
    const tableList = this.$store.state.article.tableData

    tableList.forEach((e) => {
    // articleClassData添加value和label属性，便于筛选框展示
      this.articleClassData.push({
        value: e.id,
        label: e.cate_name
      })
    })

    this.initData()
  },
  mounted () {
    this.$nextTick(() => {
    //   location.reload()
    })
  },
  methods: {
    // 渲染表格数据
    async initData () {
      this.loading = true
      const res = await getArticleList(this.form)
      //   获取的总条数进行赋值
      this.pageTotal = res.total
      //   对获取的标准时间进行转换
      res.data = res.data.map(e => {
        e.pub_date = this.convertTimeFormat(e.pub_date)
        return e
      })
      //   将获取的列表数据赋值给渲染的表格
      this.tableData = res.data
      this.loading = false
    },
    // 标准时间转换为yyyy-mm-dd格式
    convertTimeFormat (timeStr) {
      const date = new Date(timeStr)
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? ('0' + m) : m
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      const h = date.getHours()
      let mm = date.getMinutes()
      mm = mm < 10 ? ('0' + mm) : mm
      let ss = date.getSeconds()
      ss = ss < 10 ? ('0' + ss) : ss
      const time = y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + ss
      return time
    },

    // 筛选功能
    async searchInfo () {
      // 获取仓库保存的文章分类数据
      const storeList = this.$store.state.article.tableData
      //   console.log(storeList)
      // 空判断
      if (!this.form.value1 || !this.form.value2) {
        this.$message.warning('请选择筛选项！')
        return
      }

      //   根据选择的id找到对应的文章分类名称
      if (this.form.value1 !== '所有分类') {
        const [articleClassName] = storeList.filter(v => {
          return v.id === this.form.value1
        })

        //   筛选所有状态且分类不等于所有分类场景
        if (this.form.value2 === '所有状态') {
        //   console.log('-----', articleClassName.cate_name)
          this.loading = true
          const res = await getArticleList(this.form)

          //   对获取的标准时间进行转换
          res.data = res.data.map(e => {
            e.pub_date = this.convertTimeFormat(e.pub_date)
            return e
          })

          //   对获取的数据进行筛选
          this.tableData = res.data.filter(v => {
            return v.cate_name === articleClassName.cate_name
          })
          //   获取的总条数进行赋值
          this.pageTotal = this.tableData.length
          this.loading = false
        }

        // 筛选分类和状态都不等于所有的场景
        if (this.form.value2 !== '所有状态') {
          this.loading = true
          const res = await getArticleList(this.form)

          //   对获取的标准时间进行转换
          res.data = res.data.map(e => {
            e.pub_date = this.convertTimeFormat(e.pub_date)
            return e
          })

          //   对获取的数据进行筛选
          this.tableData = res.data.filter(v => {
            return v.cate_name === articleClassName.cate_name && v.state === this.form.value2
          })
          //   获取的总条数进行赋值
          this.pageTotal = this.tableData.length
          this.loading = false
        }
      }

      //   筛选所有分类且状态不等于所有的场景
      if (this.form.value1 === '所有分类') {
        this.loading = true
        const res = await getArticleList(this.form)

        //   对获取的标准时间进行转换
        res.data = res.data.map(e => {
          e.pub_date = this.convertTimeFormat(e.pub_date)
          return e
        })
        // this.initData()
        this.tableData = res.data.filter(v => {
          return v.state === this.form.value2
        })
        //   获取的总条数进行赋值
        this.pageTotal = this.tableData.length
        this.loading = false
      }

      //    筛选分类和状态都等于所有的场景
      if (this.form.value1 === '所有分类' && this.form.value2 === '所有状态') {
        this.initData()
      }
    },
    resetElCardSelect () {
      this.form.value1 = ''
      this.form.value2 = ''

      this.initData()
    },
    async del (id) {
      console.log(id)
      const res = await userDelArticle(id)

      if (res.message !== '删除成功！') {
        this.$message.error(res.message)
        return
      }

      //   删除成功，提示用户删除成功
      this.$message.success(res.message)

      //   如果当前页是最后一页，删除最后一条数据，需要渲染前一页的数据
      if (this.tableData.length === 1 && this.form.pagenum > 1) {
        this.form.pagenum--
      }

      // 重新渲染页面
      this.initData()
    },
    // 修改逻辑
    publishArticle (id) {
      if (id > -1) {
        this.$router.push('/publish')
        this.$store.commit('article/setNavShowPublish', true)
        this.$store.commit('article/setArticleEditId', id)
      } else {
        this.$router.push('/publish')
        this.$store.commit('article/setNavShowPublish', true)
      }
    },
    handleCurrentChange (val) {
      this.form.pagenum = val
      //   重新渲染
      this.initData()
    },
    handlePageSizeChange (size) {
      this.form.pagesize = size
      //   重新渲染
      this.initData()
    }
    // 发布文章逻辑
    // publishArticle () {
    //   this.$router.push('/publish')
    //   this.$store.commit('article/setNavShowPublish', true)
    // }
  }

}
</script>

<style lang="scss" scoped>
.article-list-page {
    .el-card {
        ::v-deep .el-card__header {
            font-size: 16px;
            color: #131523;
        }
        .el-card__body {
            .card-select {
                margin-bottom: 20px;
                display: flex;
                justify-content: space-between;
                .selectName {
                    margin-right: 10px;
                }
                .secondSelect {
                    margin-left: 20px;
                }
                .btn {
                    margin-left: 10px;
                    background-color: #4f81ff;
                    font-size: 14px;
                    color: rgba(255,255,255,0.90);
                    text-align: center;
                    // line-height: 22px;
                    font-weight: 400;
                }
                .resetBtn {
                    background-color: #eaecf5;
                    color: #0052D9;
                    font-size: 14px;
                }
            }
        }
    }
}

::v-deep .el-pager li.active {
    border: 1px solid rgba(220, 220, 220, 1);
    color: rgba(0,0,0,0.60);
    border-radius: 3px;
}
::v-deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: rgba(255, 255, 255, 0.9) !important; //修改默认的背景色
  color: rgba(0,0,0,0.60);
}
</style>
